<!--
  This file is a part of the open-eBackup project.
  This Source Code Form is subject to the terms of the Mozilla Public License, v. 2.0.
  If a copy of the MPL was not distributed with this file, You can obtain one at
  http://mozilla.org/MPL/2.0/.
  
  Copyright (c) [2024] Huawei Technologies Co.,Ltd.
  
  THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND,
  EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT,
  MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
  -->

<lv-collapse lvType="simple" class="panel-cluster">
  <lv-collapse-panel [lvTitle]="titleTpl" lvExpanded="true">
    <div>
      <lv-group [lvGutter]="'10px'">
        <div [ngClass]="{'header':isEn,'header-en':!isEn}">
          <div [ngClass]="{'header-content-1':isEn,'header-1':!isEn}">
            <lv-group [lvGutter]="'10px'">
              <i lv-icon="aui-icon-job-status-success" *ngIf="headerData.wrongClusterNum === 0"></i>
              <i lv-icon="lv-icon-popup-danger-48" *ngIf="headerData.wrongClusterNum > 0"></i>
              <span
                [ngClass]="{'headNum': !_empty(headerData), 'headNumEmpty':_empty(headerData)}">{{headerData.wrongClusterNum
                | nil}}</span>
            </lv-group>
            <span class="desc">{{ 'system_abnormal_node_label' | i18n}}</span>
          </div>
        </div>
        <div [ngClass]="{'header':isEn,'header-en':!isEn}">
          <div [ngClass]="{'header-content-2':isEn,'header-2':!isEn}">
            <lv-group [lvGutter]="'10px'">
              <img src="assets/img/ha_logo.svg">
              <h1 *ngIf="!headerData.ha">{{ 'common_disabled_label' | i18n}}</h1>
              <h1 *ngIf="headerData.ha">{{ 'system_tape_enabled_label' | i18n}}</h1>
            </lv-group>
            <span class="desc">{{'system_local_cluster_ha_label' | i18n}}</span>
          </div>
        </div>
        <div [ngClass]="{'header':isEn,'header-en':!isEn}">
          <div [ngClass]="{'header-content-3':isEn,'header-3':!isEn}">
            <h1>{{headerData.totalCapacity | capacityCalculateLabel:'1.1-3':unitconst.KB:
              true}}</h1>
            <span class="desc">{{'common_total_capacity_label' | i18n}}</span>
          </div>
        </div>
      </lv-group>
    </div>
    <div class="aui-operation">
      <lv-group [lvGutter]="groupCommon.middleRowGutter">
        <button lvType="primary" lv-button (click)="addMemberNode()" pmpermission pmOperation="AddingTargetCluster">
          {{ 'common_create_label' | i18n }}
        </button>
        <button lv-button (click)="deleteMemberNode()" [disabled]="clusterSelection.length === 0 || disabledDelete"
          pmpermission pmOperation="DeletingTargetCluster">
          {{ 'common_delete_label' | i18n }}
        </button>
        <button lv-button lv-dropdown [lvDropdownMenus]="haMenus" [disabled]="isHaDisabled" pmpermission
          pmOperation="ManageHA" lv-tooltip="{{'system_ha_management_tip_label' | i18n}}">{{
          "system_ha_management_label"
          | i18n }}
          <i #lvDropdownTrigger lv-icon="lv-icon-triangle-down"></i>
        </button>
      </lv-group>
      <lv-group>
        <button class="aui-button-icon" lv-button lvSize="auto" (click)="refreshTargetCluster()">
          <i lv-icon="lv-icon-refresh" [lvColorState]="true"></i>
        </button>
      </lv-group>
    </div>

    <div class="list-container">
      <lv-datatable [lvData]="clusterData" #lvBackupTable lvResize lvSelectionMode="multiple"
        [lvSelection]="clusterSelection" (lvSelectionChange)="selectionChange($event)" lvCompareWith="clusterId"
        lvResizeMode="expand" [lvScroll]="{ x: '100%' }">
        <thead>
          <tr>
            <th lvShowCheckbox width="40px" [lvRowsData]="lvBackupTable.renderData | selecTable"></th>
            <th lvCellKey="clusterName" lvShowCustom>
              {{ 'common_name_label' | i18n }}
              <div lvCustom>
                <aui-custom-table-search (search)="searchByName($event)"
                  filterTitle="{{'common_name_label' | i18n}}"></aui-custom-table-search>
              </div>
            </th>
            <th lvCellKey="roleList" lvShowFilter [(lvFilters)]="roleFilters" (lvFilterChange)="filterChange($event)"
              lvFilterCheckAll width="177px">
              {{ 'common_role_label' | i18n }}
            </th>
            <th lvCellKey="statusList" lvShowFilter [(lvFilters)]="statusFilters"
              (lvFilterChange)="filterChange($event)" lvFilterCheckAll>
              {{ 'common_status_label' | i18n }}
            </th>
            <th lvCellKey="modellist" width="200px">
              {{'common_model_label' | i18n }}
            </th>
            <th lvCellKey="capacitylist" width="300px">
              {{'common_capacity_label' | i18n }}
            </th>
            <th lvCellKey="ip" width="200px" lvShowCustom>
              {{'system_management_ip_label' | i18n}}
              <div lvCustom>
                <aui-custom-table-search (search)="searchByIp($event)"
                  filterTitle="{{'system_management_ip_label' | i18n }}"></aui-custom-table-search>
              </div>
            </th>
            <th width="200px">{{ 'system_internal_communication_network_plane_label' | i18n }}</th>
            <th width="144px">{{ 'common_operation_label' | i18n }}</th>
          </tr>
        </thead>
        <tbody>
          <ng-container *ngFor="let item of lvBackupTable.renderData;trackBy:trackByUuid">
            <tr
              *ngIf="item.role === ROLE_TYPE.primaryNode.value || item.role === ROLE_TYPE.memberNode.value ||  item.role === ROLE_TYPE.backupNode.value">
              <td lvShowCheckbox width="40px" [lvRowData]="item"
                [lvDisabled]="item.role === ROLE_TYPE.primaryNode.value">
              </td>
              <td>
                <span lv-overflow
                  [ngClass]="{'aui-link': hasClusterDetailPermission, 'aui-link-disabled': item.status === 26 || item.status === 29}"
                  (click)="memberNodeDetail(item)" id="outerClosable">{{ item.clusterName }}</span>
              </td>
              <td *ngIf="item.role === ROLE_TYPE.primaryNode.value">
                <lv-group lvGutter='8px'>
                  <span>{{ primaryNodeLabel }}</span>
                  <div *ngIf="headerData.ha" class="ha-tag">HA</div>
                </lv-group>
              </td>
              <td *ngIf="item.role === ROLE_TYPE.memberNode.value">
                {{ memberNodeLabel }}
              </td>
              <td *ngIf="item.role === ROLE_TYPE.backupNode.value">
                <lv-group lvGutter='8px'>
                  <span>{{ standbyNodeLabel }}</span>
                  <div *ngIf="headerData.ha" class="ha-tag">HA</div>
                </lv-group>
              </td>
              <td *ngIf="item.status !== 26 && item.status !== 29">
                <aui-status [value]="item.status" type="Cluster_Status"></aui-status>
              </td>
              <td *ngIf="item.status === 26">
                <i lv-icon="aui-icon-loading" class="lv-m-rotate"></i>
                {{ 'system_net_plane_setting_label' | i18n}}
              </td>
              <td *ngIf="item.status === 29">
                <i lv-icon="aui-icon-loading" class="lv-m-rotate"></i>
                {{ 'common_status_deleting_label' | i18n}}
              </td>
              <td width="200px">
                {{ item.mode | nil}}
              </td>
              <td width="300px">
                <div class='percent-bar'>
                  <lv-progress [lvValue]="item.sizePercent" [lvSize]="'small'" [lvColors]='progressBarColor'
                    [lvLabel]="progressLabelTpl" lvDecimals="3"></lv-progress>
                  <div class='size-percent'>
                    {{item.usedCapacity | capacityCalculateLabel:'1.1-3':unitconst.KB:
                    true}}/{{item.capacity | capacityCalculateLabel:'1.1-3':unitconst.KB:
                    true}}
                  </div>
                </div>
              </td>
              <td>
                <span lv-overflow>
                  {{ item.ipArr }}
                </span>
              </td>
              <td>
                <i lv-icon="aui-icon-loading" class="lv-m-rotate"
                  *ngIf="isNetplaneStatusLoading(item.netPlaneSettingStatus)"></i>
                <i lv-icon="aui-icon-job-status-fail" *ngIf="isNetplaneStatusFailed(item.netPlaneSettingStatus)"></i>
                <span>
                  {{item.netPlaneSettingStatus | textMap: 'netplaneStatus'}}
                </span>
                <span class="aui-link resource-link-btn" [routerLink]="['/insight/alarms']"
                  *ngIf="isNetplaneStatusFailed(item.netPlaneSettingStatus)">
                  {{'common_view_label'| i18n}}
                </span>
              </td>
              <td>
                <ng-container *ngIf="item.role === ROLE_TYPE.primaryNode.value; else memberNodeFn">
                  <lv-operation-menu [lvItemsFn]="BackupPrimaryOptsCallback" [lvData]="item">
                  </lv-operation-menu>
                </ng-container>
                <ng-template #memberNodeFn>
                  <lv-operation-menu [lvItemsFn]="BackupMemberOptsCallback" [lvData]="item">
                  </lv-operation-menu>
                </ng-template>
              </td>
            </tr>
          </ng-container>
        </tbody>
      </lv-datatable>
    </div>
    <div class="paginator">
      <lv-paginator [lvPageSize]="pageSize" [lvTotal]="total" [lvPageIndex]="pageIndex"
        (lvPageChange)="clusterPageChange($event)" [lvPageSizeOptions]="sizeOptions" [hidden]="total < 10">
      </lv-paginator>
    </div>
  </lv-collapse-panel>
</lv-collapse>
<aui-target-cluster [componentData]="componentData"></aui-target-cluster>

<ng-template #emptyTpl>
  --
</ng-template>
<ng-template #titleTpl>
  <lv-group>
    <ng-container *ngIf="i18n.isEn; else elseTemplate">
      <span class="custom-title">{{'system_local_cluster_node_label' | i18n}} ({{total}})</span>
    </ng-container>
    <ng-template #elseTemplate>
      <span class="custom-title">{{'system_local_cluster_node_label' | i18n}}({{total}})</span>
    </ng-template>
    <i lv-icon="aui-icon-help" lv-tooltip="{{'system_local_cluster_node_tip_label' | i18n}}"
      class="cluster-help" lvColorState='true'></i>
  </lv-group>
</ng-template>
